<template>
  <div class="gs-wrap">
    <div class="gs-nav">我的钱包 > 收入概览</div>
    <div class="gs-income">
      <div class="gs-income-left">
        <div class="gs-icome-text">
          <p class="p1">本日收入</p>
          <p class="p2"><span>¥</span>{{dayCommonIn}}</p>
        </div>
        <img src="~/assets/images/gs-left-icon.png" /> 
      </div>
      <div class="gs-income-right">
        <div class="gs-icome-text">
          <p class="p1">本月收入</p>
          <p class="p2"><span>¥</span>{{monthCommonIn}}</p>
        </div>
        <img src="~/assets/images/gs-right-icon.png" /> 
      </div>
    </div>
    <div class="gs-line">
      <div class="gs-line-title">
        <div class="gs-line-title-left">七天订单折线图</div>
        <div class="gs-line-title-right" @click="showList">
          <p>{{lineName}}</p>
          <img :class="listShow ? 'gs-xlimg' : ''" src="~/assets/images/gs-xl.png" />
          <div class="gs-line-title-list" v-show="listShow">
            <div class="gs-line-list-item" @click.stop="selsectItem($event,1)">完成订单量</div>
            <div class="gs-line-list-item" @click.stop="selsectItem($event,2)">完成订单金额</div>
            <div class="gs-line-list-item" @click.stop="selsectItem($event,3)">预估收入</div>
          </div>
        </div>
      </div>
      <div class="gs-line-content">
        <div id="main" class="gs-line-style"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  async fetch({store}) {
    await store.commit('setWalletIndex', 0)
  },
  layout: 'internalouts',
  mounted() {
    this.getReportSalesData();
  },
  beforeDestory(){
    if (!this.myChart) {
      return
    }
    this.myChart.dispose();//销毁
    this.myChart = null;

  },
  components: {
    
  },
  data() {
    return {
      listShow: false,
      lineName: '完成订单量',
      monthCommonIn: 0,
      dayCommonIn: 0,
      lineTitle: [],
      orderData:  [],
      moneyDate: [],
      moneyCommInData: [],
      myChart:null,
    }
  },
  methods: {
    showList() { // 选择折线图
      this.listShow = !this.listShow;
    },
    selsectItem(e,type) { // 选择k线
      this.lineName = e.target.innerText
      this.listShow = false;
      if(type === 1){
        this.initKline(this.lineTitle,this.orderData,this.lineName);
      }else if(type === 2){
        this.initKline(this.lineTitle,this.moneyDate,this.lineName);
      }else if(type === 3){
        this.initKline(this.lineTitle,this.moneyCommInData,this.lineName);
      }
    },
    getReportSalesData(){
        this.$axios.$post('statisticsReport',{}).then(res => {
        if(res.status === 200 ){
          //今日数据
          if(res.obj.dayCommonIn != null){
            this.dayCommonIn = res.obj.dayCommonIn;
          }
          //本月收入
          if(res.obj.monthCommonIn != null){
            this.monthCommonIn = res.obj.monthCommonIn;
          }
          var lines = res.obj.lines;
          for(let i in lines){
            let line = lines[i];
            this.lineTitle.push(line.time);
            this.orderData.push(line.orderNum);
            this.moneyDate.push(line.orderMoney);
            this.moneyCommInData.push(line.totalCommonIn);
          }
          //默认调取第一个
          this.initKline(this.lineTitle,this.orderData,this.lineName);
        }else{
          this.$message({
            message:res.msg,  
            type:'warning'
          })
         }
      })
      .catch(error => {
        this.$message({
          message:'请求失败',  
          type:'warning'
        })
        this.loading = false;
      })
    },
    initKline(lineTitle,data,name) {
        // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据
      var option = {
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: lineTitle,
          },
          yAxis: {
            type: 'value',
          },
          tooltip:{
            trigger:'axis',
            backgroundColor:'rgba(255,255,255,0.9)',  //设置背景图片 rgba格式
            textStyle:{
              color:'#666666' //设置文字颜色
            },
            borderWidth: "1", //边框宽度设置
            borderColor:'#ffffff', //边框颜色设置
            formatter: '{a}: {c}', //设置提示框的文字
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' //设置提示框的背景阴影
          },
          series: [{
            data: data,
            type: 'line',
            name: name,
            symbol: "circle",//设置折线上的小圆点
            symbolSize: 6, //设置小圆点大小的
            lineStyle: {
              color: '#0698e7'
            },
            itemStyle: {
              color: '#0698e7' //设置圆点颜色，和线性渐变的起始色的
            },
            areaStyle:{ //设置echarts背景线性渐变颜色的
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#B9E2F8' // 0% 处的颜色
                }, {
                    offset: 0.5, color: '#D5EEFB' // 50% 处的颜色
                }, {
                    offset: 1, color: '#fff' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
      let _this = this
      setTimeout(function (){ //图表自适应
        window.onresize = function () {
          _this.myChart.resize();
        }
      },200)
    }
  }
}
</script>

<style scoped>
  .gs-nav {
    font-size: 14px;
    color: #999;
    height: 50px;
    line-height: 50px;
  }
  .gs-income {
    display: flex;
    justify-content: space-between;
  }
  .gs-income>div {
    width: 469px;
    height: 140px;
    background: #fff;
    border-radius: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .gs-income-left {
    border-left: 6px solid #0096e6;
  }
  @media screen and (min-width:1200px){
    .gs-income-left{
      width:48% !important;
    }
  }
  @media screen and (max-width:1200px){
    .gs-income-left{
      width:48% !important;
    }
  }
  .gs-income-left img {
    width: 86px;
    height: 35px;
    margin-right: 40px;
  }
  .gs-income-right {
    border-left: 6px solid #fe6663;
  }
  @media screen and (min-width:1200px){
    .gs-income-right{
      width:48% !important;
    }
  }
  @media screen and (max-width:1200px){
    .gs-income-right{
      width:48% !important;
    }
  }
  .gs-income-right img{
    width: 86px;
    height: 35px;
    margin-right: 40px;
  }
  .gs-icome-text {
    margin-left: 68px;
  }
  .gs-icome-text .p1 {
    color: #666;
    font-size: 16px;
  }
  .gs-icome-text .p2 {
    color: #333;
    font-size: 30px;
    font-weight: bold;
    margin-top: 20px;
  }
  .gs-icome-text .p2 span {
    font-size: 20px;
  }
  .gs-line {
    height: 450px;
    background: #fff;
    border-radius: 6px;
    margin-top: 20px;
  }
  .gs-line-title {
    display: flex;
    margin: 0 60px;
    justify-content: space-between;
    padding-top: 20px;
  }
  .gs-line-title-left {
    color: #333;
    font-size: 14px;
    position: relative;
  }
  .gs-line-title-left::before {
    content: '';
    width: 3px;
    height: 15px;
    background: #0096e6;
    position: absolute;
    left: -23px;
    top: -1px;
  }
  .gs-line-title-right {
    width: 140px;
    height: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
  }
  .gs-line-title-right img {
    width: 11px;
    height: 6px;
    margin-right: 8px;
    transition: all .2s;
    user-select: none;
  }
  .gs-line-title-right p::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 2px;
    position: absolute;
    left: -15px;
    top: 3px;
    background: #0096e6;
  }
  .gs-line-title-right p {
    position: relative;
    margin-left: 23px;
    user-select: none;
  }
  .gs-line-title-list {
    font-size: 14px;
    color: #333;
    width: 140px;
    height: 89px;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    z-index: 2;
    top: 34px;
    left: 0;
    box-shadow: 0px 1px 5px #888888;
    user-select: none;
  }
  .gs-line-list-item {
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    padding-left: 22px;
  }
  .gs-line-list-item:hover {
    background: #ebf7fd;
  }
  .gs-xlimg {
    transform: rotate(-180deg)
  }
  .gs-line-style {
    min-width: 940px;
    height: 400px;
  }
</style>
